<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_固定定位全屏遮罩</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,0.4);
            /*使用固定定位，以html为参照物，紧贴四个边，就能实现撑满全屏的效果*/
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consectetur dolor ducimus eius eligendi, iusto
            officia praesentium, quas quasi qui quisquam quos repellat repellendus repudiandae saepe sed sint vitae.
            Magnam.
        </div>
        <div>Dolorem eius explicabo, harum nobis perferendis quae quo, recusandae repudiandae velit veniam, voluptates
            voluptatum? Accusantium animi consequatur culpa cumque dolore ipsa nobis, odit quis quos? Amet dolorem
            exercitationem officia omnis?
        </div>
        <div>Beatae, blanditiis consectetur cumque cupiditate delectus deleniti dolor doloribus ea earum fuga fugiat hic
            inventore itaque libero neque nisi nobis porro quidem, quod rem repellat, soluta temporibus ut veritatis
            vitae.
        </div>
        <div>Asperiores doloribus eveniet excepturi id minima, perferendis quisquam veniam voluptatibus? Consectetur
            dolore, facilis laudantium modi nobis omnis quibusdam reprehenderit repudiandae saepe. Eligendi explicabo
            id, minima modi neque nesciunt sequi velit?
        </div>
        <div>Assumenda atque beatae commodi dicta eligendi, et ex expedita laudantium modi nemo nesciunt, possimus
            quaerat quam qui quisquam reprehenderit rerum soluta totam. Adipisci, aliquam cum ipsam libero pariatur
            possimus voluptas.
        </div>
        <div>Corporis dignissimos expedita facilis id maxime? Ad architecto deleniti dignissimos dolor exercitationem
            inventore, ipsum omnis quam quas veritatis! Autem eius quae quas quisquam reprehenderit rerum sunt
            voluptatem voluptatum. Laudantium, quos.
        </div>
        <div>A distinctio dolor, dolore eligendi, enim, facilis hic id nostrum quasi quidem repellat sit. A assumenda
            blanditiis dolorem earum eligendi excepturi hic impedit molestiae mollitia provident quasi quibusdam
            repellat, voluptates?
        </div>
        <div>At beatae debitis, eaque enim et excepturi incidunt laudantium magni maxime mollitia, nam quis quisquam,
            quod recusandae repudiandae sunt unde! A harum placeat sed soluta tempore. Adipisci aperiam autem dolorum?
        </div>
        <div>Blanditiis dolore, est exercitationem explicabo iste iusto libero natus quidem recusandae voluptatem. Ad
            aut beatae culpa doloribus dolorum ea, et incidunt inventore modi, nam necessitatibus, nobis perspiciatis
            praesentium quos similique?
        </div>
        <div>Accusamus dolore expedita ipsum obcaecati officiis qui recusandae sequi. Accusamus cupiditate dignissimos
            dolores doloribus facere facilis, illo in incidunt iste odit pariatur, quam rerum saepe similique sint vero
            vitae voluptatem.
        </div>
        <div>Accusamus accusantium cumque dolores dolorum eligendi enim explicabo fugit iusto neque nisi non nulla
            officia porro quia reiciendis reprehenderit sed sint tenetur unde, vel velit vero vitae voluptas voluptatem
            voluptatum!
        </div>
        <div>Architecto assumenda consequatur cumque, dignissimos dolor dolores ducimus ea eaque eveniet expedita
            impedit inventore iste iusto libero nam nihil nulla porro quidem rem, rerum sequi soluta temporibus unde ut
            vero?
        </div>
        <div>Debitis, dignissimos incidunt natus nobis rem suscipit veritatis? A consequatur dicta dignissimos
            distinctio error est fugiat minima nesciunt, nulla numquam obcaecati odio optio possimus quas quisquam rem
            sit voluptas voluptatibus.
        </div>
        <div>Assumenda atque beatae commodi culpa cupiditate dicta expedita fugiat magnam odit officiis qui quidem quod
            saepe vero, voluptate. Ad eligendi esse pariatur quisquam. Autem nesciunt odio officia placeat, provident
            quia?
        </div>
        <div>Ab, aliquid architecto aspernatur assumenda autem, beatae culpa dolor dolores fuga harum illo iste labore
            laboriosam neque nostrum nulla qui, quo ratione rem reprehenderit rerum saepe totam unde ut veniam!
        </div>
        <div>Aliquam dolore dolores iusto quibusdam sit. Ab aspernatur culpa eius, error esse ex expedita explicabo
            incidunt laboriosam magni maxime neque nesciunt nostrum possimus, provident quam, quo repellat repudiandae
            veniam voluptate.
        </div>
        <div>Accusamus adipisci aperiam architecto asperiores distinctio dolor ea eligendi eos eum inventore ipsa iure
            minima natus non nulla pariatur perferendis quam quas qui repudiandae sit ut voluptas voluptate voluptates,
            voluptatum!
        </div>
        <div>Animi aut delectus dolorem esse, explicabo illo nesciunt pariatur quibusdam quis ratione recusandae
            voluptatibus? Aperiam doloremque explicabo nostrum veniam. Alias cumque doloremque nobis, numquam obcaecati
            perspiciatis quod repellendus voluptas voluptatem!
        </div>
        <div>Aliquam atque consequatur error, facere fuga impedit iure minima non tempore temporibus? Alias architecto
            at aut corporis cumque delectus deserunt, dolorum eum fuga illum necessitatibus, odit perspiciatis
            repellendus similique sint?
        </div>
        <div>Aperiam architecto, dignissimos expedita quod totam veritatis. At deserunt esse iste necessitatibus,
            praesentium rem tempore. Autem blanditiis molestiae, omnis praesentium vel velit veniam! Enim facere iure
            laborum odit perferendis reprehenderit.
        </div>
        <div>Culpa est iste qui rem. Animi ea error et nemo quod similique tempore, voluptate. Alias at deserunt, dicta
            et ex facilis incidunt laboriosam molestiae obcaecati, pariatur quas quia quibusdam totam?
        </div>
        <div>Autem commodi cupiditate excepturi harum? Accusamus, accusantium amet aperiam autem dolorem doloribus et
            excepturi, facere fugiat hic minus nobis non odit officia perferendis quidem reiciendis totam ullam vel
            voluptas. Impedit.
        </div>
        <div>Alias autem consequuntur eaque earum esse est eum excepturi facere ipsum laboriosam libero minus neque
            nesciunt quidem quisquam quo sit tempora, vitae voluptates voluptatum. Ducimus est illum minima quibusdam
            sit.
        </div>
        <div>Ab commodi dolore doloribus eligendi est eum facilis molestias perferendis praesentium quisquam, quos sint
            tempore totam unde ut vel, voluptatem! Dolorum fuga id non nostrum porro possimus praesentium veritatis
            vero.
        </div>
        <div>Dolorem inventore iure quia quibusdam? Beatae dolorum iusto neque non numquam officiis quae quibusdam
            recusandae temporibus, voluptates. Deleniti distinctio dolor illum inventore perspiciatis possimus qui
            ratione ullam vel velit. Ab.
        </div>
        <div>Adipisci architecto deserunt dicta doloribus, dolorum eum illo sequi suscipit tempore vel veniam
            voluptates? A at debitis deleniti eius excepturi iusto laudantium libero nemo nihil officia, optio quod quos
            rem.
        </div>
        <div>Accusantium aspernatur delectus dignissimos ea earum explicabo labore modi natus odit quae, quis sapiente
            similique, temporibus totam ullam vel voluptas? Aspernatur ex, nulla. Ad assumenda deleniti dolor dolores,
            fugit reprehenderit?
        </div>
        <div>Accusantium blanditiis eaque enim ex explicabo illo impedit ipsam magni molestiae nobis nostrum obcaecati
            odio omnis quae, quia quod sed sint sit tempore vel? Accusamus adipisci alias deserunt inventore ipsa?
        </div>
        <div>Aliquid commodi cumque, eum excepturi ipsa maxime modi possimus qui rerum sunt. Accusantium beatae labore
            reiciendis veniam voluptatibus. Corporis culpa ipsum odit quas quo recusandae reiciendis tempora tenetur
            voluptatem voluptatum!
        </div>
        <div>Animi at aut autem culpa dolorem eos fuga, nesciunt possimus, quibusdam repellat repellendus sequi unde.
            Blanditiis cumque delectus deleniti ea eaque quia. Alias ea iure laboriosam magnam maxime repellat
            voluptatibus?
        </div>
        <div>Atque aut dignissimos dolores ea eum expedita illum iusto laboriosam laborum maxime nemo officia quam,
            quasi ratione soluta tenetur totam. Doloribus facere magnam maxime, officia quod tempore! Necessitatibus,
            nisi, reiciendis.
        </div>
        <div>Cum esse mollitia necessitatibus possimus reprehenderit saepe sed veritatis. Alias aliquam aliquid animi
            cupiditate earum explicabo facere ipsa libero porro! Facilis ipsam magni nisi quasi quos repellat voluptas
            voluptate voluptates.
        </div>
        <div>Dolorum eum exercitationem minima, obcaecati pariatur repellendus voluptates. Commodi dignissimos eius
            facilis nemo officiis placeat qui quibusdam quisquam repellendus, sapiente? Consectetur exercitationem
            minima perferendis quaerat quasi sed veniam vero voluptatum.
        </div>
        <div>Aliquid animi at cupiditate deserunt dolorum ea esse et eum facere ipsa iste, minus nihil nobis nulla odio
            officia omnis provident quas, quasi quia soluta sunt, tenetur velit voluptas voluptatibus?
        </div>
        <div>Aperiam at, dignissimos ducimus eaque itaque obcaecati placeat reprehenderit! Aspernatur aut consectetur
            debitis dicta eos libero nostrum, sint tempore temporibus! Architecto debitis deserunt omnis quas recusandae
            repellendus repudiandae veniam veritatis.
        </div>
        <div>A aperiam atque aut consequatur cumque deserunt doloremque dolores ea, eligendi facilis, harum id ipsam
            itaque iure magni modi omnis quam quidem reprehenderit rerum sapiente sequi soluta sunt unde voluptatibus.
        </div>
        <div>Aspernatur corporis culpa cumque, dicta doloribus eveniet facilis ipsam laboriosam molestias nesciunt non
            odit officia quia quidem sed vitae, voluptatum. Commodi cum dolor eaque eligendi eum perspiciatis porro
            provident repudiandae.
        </div>
        <div>Aliquid asperiores cumque, deleniti eius eligendi impedit ipsa itaque laboriosam libero nihil numquam
            optio, perspiciatis quam quod velit voluptas voluptatem. Aliquam blanditiis, corporis esse facilis non odio
            odit possimus sapiente.
        </div>
        <div>Aspernatur at atque, beatae blanditiis deserunt dignissimos dolore eaque earum ex fugiat iure labore
            laboriosam molestiae natus nemo nihil nisi officia optio porro qui quibusdam repellendus reprehenderit
            similique, vitae voluptates?
        </div>
        <div>Alias asperiores aut cupiditate distinctio doloremque, esse excepturi expedita fugiat ipsa maxime minus
            molestiae numquam provident rem, rerum tempora ut! Esse molestiae repellat temporibus tenetur voluptas!
            Aperiam in nulla repellendus!
        </div>
        <div>Eum eveniet facere id ipsam molestiae odit, possimus quaerat quam! Laudantium, natus, sit! Aperiam beatae
            dicta distinctio ea explicabo, id labore mollitia nam, omnis possimus, praesentium sed sequi ut voluptas.
        </div>
        <div>Accusamus aliquid atque earum laborum maiores minus obcaecati odit! Adipisci animi assumenda aut cum
            delectus, doloremque doloribus, illo nemo nostrum numquam quibusdam quisquam, reiciendis repellat
            repudiandae rerum vel veritatis voluptates.
        </div>
        <div>Accusamus fugiat labore officiis quos sequi, ut. Alias expedita, id libero nulla repellendus soluta totam
            voluptas! Debitis expedita explicabo laboriosam nemo perferendis quod temporibus. Amet cumque ipsum minus
            ratione ut!
        </div>
        <div>Amet delectus dicta et harum impedit obcaecati perspiciatis quos sint? Aliquam aut blanditiis, commodi
            cumque dolorum ea, esse facilis illo in incidunt natus nostrum omnis qui repellendus saepe sed voluptatem!
        </div>
        <div>A animi aperiam assumenda corporis cupiditate dolore ea enim facilis hic inventore, itaque iusto labore
            maiores nam nemo non, numquam pariatur possimus qui quo quos, reprehenderit similique tempora tempore totam.
        </div>
        <div>Asperiores eaque est iusto numquam officiis praesentium ratione, tempora? Doloribus ducimus facilis fuga
            perferendis placeat quaerat qui ratione totam vitae! Ad alias architecto cumque, magnam modi officia ut
            veniam. In.
        </div>
        <div>Alias aspernatur deleniti dicta doloremque explicabo facere fugiat harum labore, libero, nemo nobis
            perspiciatis quia quibusdam repellat rerum sapiente sed sint totam vel voluptate? At facere iure reiciendis
            sapiente sunt?
        </div>
        <div>Alias harum, incidunt, labore nam officia, officiis provident quidem quisquam reprehenderit sequi sunt ut
            vitae! Assumenda corporis dolor hic modi molestiae nemo nostrum optio praesentium quam suscipit, vel,
            veniam, voluptas!
        </div>
        <div>A deleniti excepturi minima recusandae veritatis voluptatem. Adipisci asperiores aspernatur assumenda
            consectetur cumque dicta dolor eveniet exercitationem inventore laborum necessitatibus odio ratione,
            repudiandae soluta sunt suscipit ullam vitae voluptatibus. Sapiente.
        </div>
        <div>Aliquid aut deleniti dolorem earum eos eveniet facere fugit hic mollitia natus nemo, nihil quia vero.
            Adipisci distinctio doloremque minus, porro rerum tempore tenetur vel vero! Dicta id iusto voluptates.
        </div>
        <div>Architecto atque aut cumque, dicta eius fuga fugiat in optio quisquam repellat? Asperiores eveniet, in
            maxime numquam quidem soluta temporibus! Corporis cumque earum eos eum in? Autem esse totam voluptatibus.
        </div>
        <div>Accusamus animi esse soluta unde voluptatibus. Cum dolorem fugit odio officiis porro reiciendis sint
            tenetur! A aliquam consequatur debitis dignissimos eos et harum magni quaerat ratione, rem, soluta, tempora
            vitae?
        </div>
        <div>Expedita, perspiciatis, ut! Animi culpa dignissimos maiores nisi non rem repellendus ut! Aspernatur
            distinctio dolorem, doloribus eligendi enim eum eveniet fugit hic laborum nam nemo officia omnis praesentium
            quia veritatis.
        </div>
        <div>Aliquam architecto consequuntur cumque dolores doloribus dolorum error eum eveniet, illum itaque libero
            maiores minima mollitia nostrum numquam odit, quibusdam repellat repudiandae soluta tempora vel velit vero?
            In qui, quod.
        </div>
        <div>Adipisci atque aut cumque fugit labore voluptas voluptatum! Accusamus ducimus nam officiis qui repellat!
            Eos error minima minus obcaecati quae vitae. At ducimus enim fugit laborum odio quam similique vitae!
        </div>
        <div>Aspernatur delectus deserunt facere itaque, natus quo veniam. Accusantium aliquam atque commodi distinctio
            dolore dolores eaque excepturi exercitationem fuga in iste, laborum natus numquam porro quasi quisquam quos
            rem voluptates?
        </div>
        <div>Consectetur doloribus iure, labore laboriosam modi quod reprehenderit! Ad consequuntur dicta eaque error ex
            hic in inventore ipsam laboriosam laborum, modi obcaecati officia perferendis quo quod reiciendis suscipit
            ullam voluptas?
        </div>
        <div>Accusantium atque ea earum excepturi, ipsa non numquam. Accusantium aliquid assumenda corporis, doloremque
            error est ex in laborum, nisi odio officiis qui quisquam quo! Dolorum eligendi maiores maxime pariatur vero.
        </div>
        <div>Aspernatur cupiditate est libero quas quasi reiciendis repellat, similique. Ad asperiores consequatur
            dolore ducimus eaque, eius error exercitationem hic inventore, perferendis ut vero. Animi cumque deleniti
            deserunt id in unde.
        </div>
        <div>Aliquam consequuntur dolores quae quaerat sit tempore velit. Accusantium, ad aut debitis eaque eveniet fuga
            ratione ullam vel. A accusantium at blanditiis delectus facilis ipsam labore magnam omnis quisquam totam.
        </div>
    </div>
</body>
</html>